import {
  Navigate
} from './react-router-dom'

import Home from './components/Home.jsx'
import User from './components/User.jsx'
import UserAdd from './components/UserAdd.jsx'
import UserList from './components/UserList.jsx'
import UserDetail from './components/UserDetail.jsx'
import Profile from './components/Profile.jsx'
// import Post from './components/Post.jsx'
import NotFound from './components/NotFound.jsx'
import Login from './components/Login'
import Protected from './components/Protected'

const routes = [
  { path: '/', element: <Home></Home> },
  {
    path: '/user',
    element: <User></User>,
    children: [
      { path: 'add', element: <UserAdd ></UserAdd> },
      { path: 'list', element: <UserList ></UserList> },
      { path: 'detail/:id', element: <UserDetail ></UserDetail> },
    ]
  },
  { path: "/profile", element: <Protected component={Profile} /> },
  { path: "/login", element: <Login /> },
  // { path: "/post/:id", element: <Post /> },
  { path: "*", element: <NotFound /> },
]

export default routes
